<!DOCTYPE html>
<html>
  <head>
    <title>YouFund</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div data-role="page" data-title="Pay | YouFund" data-theme="c" id="pay">
      <div data-role="header" data-theme="c">
        <h1><img src="./images/logo_293368_web.png" alt="YouFund" /></h1>
      </div>


      <div data-role="navbar">
        <ul>
          <li><a href="home.html">Home</a></li>
          <li><a href="home.html#fund">Fund</a></li>
          <li><a href="pay.html" class="ui-btn-active ui-state-persist">Pay</a></li>
        </ul>
      </div><!-- /navbar -->


      <div data-role="content">
      
        <div data-role="collapsible" data-collapsed="false" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
           <h3>Summary</h3>
           <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
        </div>
      
        <form action="#home" type="post" id="fund-form">
          <label for="flip-1">Donate:</label>
          <select name="flip-1" id="flip-1" data-role="slider">
            <option value="off">Yes</option>
            <option value="on">No</option>
          </select> 
          <label for="slider-s">Amount:</label>
          <input type="range" name="slider-s" id="slider-s" value="25" min="0" max="100" data-highlight="true" />
          <a href="pay.html#confirm-pay" data-role="button" data-rel="dialog">Pay!</a>
        </form>




      </div><!-- /content -->

      
      <div data-role="footer" data-position="fixed" data-theme="c">
        <p>Copyright YouFund 2013</p>
      </div>
    </div><!-- /page -->

    <!-- /confirm-fund -->
    <div data-role="page" data-theme="c" id="confirm-pay">
      <div data-role="header" data-theme="c">
        <h1><img src="./images/logo_293368_web.png" alt="YouFund" /></h1>
      </div>
      <div data-role="content">
        <p>Confirm pay xxx to xxx?</p>
          <a href="#pay" data-role="button" data-theme="a" data-inline="true">Cancel</a>
          <a href="#confirm-pay" data-role="button" data-icon="check" data-inline="true">Confirm</a>
        </div>
      </div><!-- /content -->
    </div><!-- /page -->


    <link rel="stylesheet" href="./jquery.mobile-1.3.1.min.css" />
    <link rel="stylesheet" href="./styles.css" />
    <script src="./jquery-1.9.1.min.js"></script>
    <script src="./jquery.mobile-1.3.1.min.js"></script>
    <script src="./functions.js"></script>
  </body>
</html>